<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8">
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
		<link rel="stylesheet" href="layui/css/layui.css">
		<script src="layui/layui.js" type='text/javascript'></script>
		<title>test</title>
	</head>
	<body>
		
		<div class="layui-row">
		    <div class="layui-col-md6" id="orderInfoDiv"></div>    
		</div>
		<script type="text/html" id="orderInfo">
		    <div class="layui-card">
		      <div class="layui-card-header">企业信息</div>
		      <div class="layui-card-body">
		        <ul class="layui-row layui-col-space10 layadmin-backlog">
		          <li class="layui-col-xs6 layui-col-sm3">
		            <a class="layadmin-backlog-body">
		              <h3></h3>
		              <p><cite style="font-size:24px;">{{d.turnover}}</cite></p>
		            </a>
		          </li>
		          <li class="layui-col-xs6 layui-col-sm3">
		            <a class="layadmin-backlog-body">
		              <h3>订单数</h3>
		              <p><cite style="font-size:24px;">{{d.orderNum}}</cite></p>
		            </a>
		          </li>
		          <li class="layui-col-xs6 layui-col-sm3">
		            <a class="layadmin-backlog-body">
		              <h3>已发货</h3>
		              <p><cite style="font-size:24px;">{{d.delivered}}</cite></p>
		            </a>
		          </li>
		          <li class="layui-col-xs6 layui-col-sm3">
		            <a class="layadmin-backlog-body">
		              <h3>未发货</h3>
		              <p><cite style="font-size:24px;">{{d.unDelivered}}</cite></p>
		            </a>
		          </li>
		          <li class="layui-col-xs6 layui-col-sm3">
		            <a class="layadmin-backlog-body">
		              <h3>已取消</h3>
		              <p><cite style="font-size:24px;">{{d.cancelled}}</cite></p>
		            </a>
		          </li>
		          <li class="layui-col-xs6 layui-col-sm3">
		            <a class="layadmin-backlog-body">
		              <h3>已收货</h3>
		              <p><cite style="font-size:24px;">{{d.received }}</cite></p>
		            </a>
		          </li>
		          <li class="layui-col-xs6 layui-col-sm3">
		            <a class="layadmin-backlog-body">
		              <h3>已评价</h3>
		              <p><cite style="font-size:24px;">{{d.evaluated}}</cite></p>
		            </a>
		          </li>
		          <li class="layui-col-xs6 layui-col-sm3">
		            <a class="layadmin-backlog-body">
		              <h3>好评率</h3>
		              <p><cite style="font-size:24px;">{{d.favorableRate}}%</cite></p>
		            </a>
		          </li>
		        </ul>
		      </div>
		    </div>
		  </script>
		  
	</body>
	<script>
	 layui.use(['laytpl'], function () {
	   var laytpl = layui.laytpl;
	
	   //订单统计(正常情况下，此处应是ajax返回后的数据，这里是模拟数据。)
	   //渲染模板所用的数据
	   var data = { turnover: "23,251", orderNum: "256", delivered: "16", unDelivered: "130", cancelled: "10", received: "100", evaluated: "80", favorableRate: "80" }   
	
	   var orderInfoTpl = orderInfo.innerHTML //获取模板，即上面所定义的 <script id="orderInfo">
	   , orderInfoDiv = document.getElementById('orderInfoDiv'); //视图 即上面的 <div id="orderInfoDiv">
	   laytpl(orderInfoTpl).render(data, function (html) { //渲染视图
	     orderInfoDiv.innerHTML = html;
	   });
	 　　})
	 </script>
</html>
